
<template>
  <div>
    <el-row type="flex">
      <el-col :span="4">
        <el-tree
          :style="{ height: heightTree }"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>

      <el-col
        class="formWarp"
        :span="20"
        style="margin-left: 10px"
        :style="{ height: heightTree }"
      >
        <div :style="{ height: heightTable }" style="overflow-y: scroll">
          <el-form ref="form" :model="formQuery" label-width="140px">
            <el-form-item label="是否管理">
              <el-checkbox-group
                v-model="formQuery.managementSystem"
                @change="handleCheckManagementSystem"
              >
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="是否展示">
              <el-checkbox-group
                v-model="formQuery.netRunSafe"
                @change="handleCheckNetRunSafe"
              >
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="是否确认">
              <el-checkbox-group
                v-model="formQuery.netMessageSafe"
                @change="handleCheckNetMessageSafe"
              >
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="是否保存">
              <el-checkbox-group
                v-model="formQuery.warnDispose"
                @change="handleCheckWarnDispose"
              >
                <el-checkbox label="0">暂无</el-checkbox>
                <el-checkbox label="1">有</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
        <div style="background: #fff; float: right; height: 40px">
          <el-button>取 消</el-button>
          <el-button type="primary">保 存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      formQuery: {
        managementSystem: [],
        netRunSafe: [],
        netMessageSafe: [],
        warnDispose: [],
        managementFile: [],
      },
      uploadUrl: "",
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 240 + "px",
      data: [
        {
          label: "山东省",
          children: [
            {
              label: "青岛市",
            },
            {
              label: "济南市",
            },
            {
              label: "烟台市",
            },
            {
              label: "潍坊市",
            },
            {
              label: "临沂市",
            },
            {
              label: "济宁市",
            },
            {
              label: "淄博市",
            },
            {
              label: "菏泽市",
            },
            {
              label: "德州市",
            },
            {
              label: "东营市",
            },
            {
              label: "威海市",
            },
            {
              label: "泰安市",
            },
            {
              label: "滨州市",
            },
            {
              label: "聊城市",
            },
            {
              label: "日照市",
            },
            {
              label: "枣庄市",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      fileMultiple: 1,
      fileList: [],
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleCheckManagementSystem(value) {
      if(this.formQuery.managementSystem.length > 1) {
        this.formQuery.managementSystem.splice(0,1)
        this.formQuery.managementSystem =[];
      }
    },
    handleCheckNetRunSafe() {},
    handleCheckNetMessageSafe() {
      if(this.formQuery.netMessageSafe.length > 1) {
        this.formQuery.netMessageSafe.splice(0,1)
        this.formQuery.netMessageSafe =[];
      }
    },
    handleCheckWarnDispose() {},
    handlePreview() {},
    uploadSuccess() {},
    before_upload() {},
  },
};
</script>
  
  <style>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
  /* margin-left:10px; */
}
</style>